<template>
  <div class="horv-sreen-layout">
    <!-- <div class="layout-header">
      <moduleHeader
        :active="2"
        layoutHeight="0.4rem"
        :buttonGroup="buttonGroup"
        @handleMenu="handleMenu"
        :headerStyle="{ height: '0.72rem' }"
        :leftStyle="{ height: '100%', width: '5.2rem' }"
        :titleStyle="{ lineHeight: '0.72rem', fontSize: '0.32rem' }"
        :buttonViewStyle="{
          height: '0.72rem',
          lineHeight: '0.72rem',
          fontSize: '0.16rem',
          paddingTop: '0.15rem',
        }"
        :buttonStyle="{ height: '0.4rem', padding: '0 0.2rem' }"
        :timeStyle="{ fontSize: '0.16rem' }"
        :rightStyle="{ top: '0.35rem' }"
      >
      </moduleHeader>
    </div> -->
    <div class="layout-content">
      <div class="layout-content-left">
        <moduleAppOverview height="1.68rem"
                           :totalData="totalData"></moduleAppOverview>
        <moduleAppTable class="app-table"
                        height="7.76rem"
                        :defaultTabs="defaultTabs"
                        :tableData="tableData"
                        @changeTab="changeTab"
                        @row-click="rowClick"></moduleAppTable>
      </div>
      <div class="layout-content-right">
        <!-- {{ detailsData }} -->
        <moduleAppDetails height="9.65rem"
                          :detailsData="detailsData"
                          :businessData="businessData"
                          :appRequirementData="appRequirementData"
                          :appIterationData="appIterationData"
                          :appDefectData="appDefectData"
                          :chartData="chartData"></moduleAppDetails>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";
import { usePeriodicRequest } from "@/utils/usePeriodicRequest.js";
import moduleHeader from "@/components/vpt-base-header-1002/index.vue";
import moduleAppOverview from "./component/app-overview/index.vue";
import moduleAppTable from "./component/app-table/index.vue";
// import moduleAppDetails from "./component/app-details/index.vue";
import moduleAppDetails from "./component/app-details-1001/index.vue";
import {
  getMonitorTotal,
  getMonitoringOverviewDetail,
} from "@/api/mockApi/largescree.js";
import {
  getAppListData,
  getAppDetailsData,
  getAppBusinessData,
  getAppRequirementData,
  getAppIterationData,
  getAppDefectData,
  getAppUsageRateData,
} from "@/api/mockApi/application.js";
import { useRouter } from "vue-router";
import { buttonGroup } from "@/router/data.js";

const router = useRouter();

// const buttonGroup = ref([
//   { id: 1, name: "总览", path: "/", disabled: false },
//   { id: 2, name: "基础设施监控", path: "/infrastructure", disabled: false },
//   { id: 3, name: "应用监控", path: "/application", disabled: false },
// ]);

const handleMenu = (item) => {
  router.push({ path: item.path });
};

const defaultTabs = ref("0");

const changeTab = (tabId) => {
  defaultTabs.value = tabId;
  appListRequest.stopFetching();
  appListRequest.updateParams({
    process_status: defaultTabs.value,
  });
  appListRequest.startFetching();
};

// 获取应用名称
const rowClick = (value) => {
  getAppDetails({
    cluster_name: value,
    app_type: "01",
  });
  getAppUsageRate({
    app_name: value,
  });
};

const totalData = ref([]);

// 获取应用监控总览
const getYyjkzsDataList = (params = {}) => {
  getMonitorTotal(params).then((res = {}) => {
    totalData.value = res.data && res.data.length ? res.data[0] : {};
  });
};

const tableData = ref([]);

// 获取应用监控告警列表
const getAppList = (
  params = {
    process_status: defaultTabs.value,
  }
) => {
  getAppListData(params).then((res) => {
    tableData.value = res.data;
    getAppDetails({
      cluster_name: tableData.value[0]?.cluster_name,
      app_type: "01",
    });
    getAppUsageRate({
      app_name: tableData.value[0]?.cluster_name,
    });
  });
};

const detailsData = ref({});

// 获取应用详情总览
// const getAppDetails = (params = {}) => {
//   getAppDetailsData(params).then((res) => {
//     detailsData.value = res.data.map((item) => {
//       return {
//         ...item,
//         request_num_max_30days: JSON.parse(item.request_num_max_30days),
//         prompt_content: JSON.parse(item.prompt_content),
//         memory_usage: item.memory_usage.slice(0, -1),
//         cpu_usage: item.cpu_usage.slice(0, -1),
//         disk_usage: item.disk_usage.slice(0, -1),
//         // memory_usage: item.memory_usage,
//       };
//     });
//     // console.log("detailsData.value", detailsData.value);
//   });
// };

// 获取应用详情
const getAppDetails = (params = {}) => {
  getMonitoringOverviewDetail(params).then((res) => {
    // console.log("======", res);
    // detailsData.value = res.data;

    detailsData.value = res.data && res.data.length ? res.data[0] : {};
    detailsData.value.cpu_usage = detailsData.value.cpu_usage.replace("%", "");
    detailsData.value.disk_usage = detailsData.value.disk_usage.replace(
      "%",
      ""
    );
    detailsData.value.memory_usage = detailsData.value.memory_usage.replace(
      "%",
      ""
    );
    detailsData.value.request_num_max_30days = JSON.parse(
      detailsData.value.request_num_max_30days || "[]"
    );
    detailsData.value.prompt_content = JSON.parse(
      detailsData.value.prompt_content || "[]"
    );
  });
};

// 获取CPU、内存、储存近30天使用率
const chartData = ref([]);
const getAppUsageRate = (params = {}) => {
  getAppUsageRateData(params).then((res) => {
    chartData.value = res.data;
    chartData.value.forEach((item) => {
      item.request_num_30days = JSON.parse(item.request_num_30days);
    });
  });
};

const businessData = ref({});

//业务运维
const getAppBusiness = (params = {}) => {
  getAppBusinessData(params).then((res) => {
    businessData.value = res.data[0] || {};
  });
};

const appRequirementData = ref([]);
// 需求饼图数据
const getAppRequirement = (params = {}) => {
  getAppRequirementData(params).then((res) => {
    appRequirementData.value = res.data;
  });
};

const appIterationData = ref([]);
// 迭代饼图数据
const getAppIteration = (params = {}) => {
  getAppIterationData(params).then((res) => {
    appIterationData.value = res.data;
  });
};

const appDefectData = ref([]);
// 缺陷饼图数据
const getAppDefect = (params = {}) => {
  getAppDefectData(params).then((res) => {
    appDefectData.value = res.data;
  });
};

// 应用监控总览定时请求
const yyjkzsRequest = usePeriodicRequest(getYyjkzsDataList, 3000);

// 应用监控告警列表定时请求
const appListRequest = usePeriodicRequest(getAppList, 3000, {
  process_status: "0",
});

// 应用详情总览定时请求
// const appDetailsRequest = usePeriodicRequest(getAppDetails, 3000);

// 业务运维定时请求
const appBusinessRequest = usePeriodicRequest(getAppBusiness, 3000);

// 需求饼图数据定时请求
// const appRequirementRequest = usePeriodicRequest(getAppRequirement, 3000);

// 迭代饼图数据定时请求
// const appIterationRequest = usePeriodicRequest(getAppIteration, 3000);

// 缺陷饼图数据定时请求
// const appDefectRequest = usePeriodicRequest(getAppDefect, 3000);

onMounted(() => {
  yyjkzsRequest.startFetching();
  appListRequest.startFetching();
  // appDetailsRequest.startFetching();
  appBusinessRequest.startFetching();
  // appRequirementRequest.startFetching();
  // appIterationRequest.startFetching();
  // appDefectRequest.startFetching();
  getAppRequirement();
  getAppIteration();
  getAppDefect();
});

onBeforeUnmount(() => {
  yyjkzsRequest.stopFetching();
  appListRequest.stopFetching();
  // appDetailsRequest.stopFetching();
  appBusinessRequest.stopFetching();
  // appRequirementRequest.stopFetching();
  // appIterationRequest.stopFetching();
  // appDefectRequest.stopFetching();
});
</script>

<style lang="less" scoped>
.layout-content {
  display: flex;
  padding: 0.2rem;
  .layout-content-left {
    width: 10.4rem;
    margin-right: 0.16rem;
    .app-table {
      margin-top: 0.2rem;
    }
  }
  .layout-content-right {
    width: 8.24rem;
  }
}
</style>
